<%@ page language="java" pageEncoding="UTF-8" buffer="16kb"%>
<script type="text/javascript">
function addRow(obj,colNum){
	var tab = obj.parentElement.parentElement.parentElement;
	var tr = obj.parentElement.parentElement;
	var newTr = tab.insertRow(tr.rowIndex+1);
	var newTds = new Array(); 
	for(var i=0; i< colNum; i++){
		newTds[i] = newTr.insertCell();
		if(i==0){
			newTds[i].innerHTML = "<input type=\"text\" id=\"xm\" name=\"xm\" autocomplete=\"off\" value='' maxlength=\"50\" class=\"required inputText\"/><input type=\"hidden\" id=\"sfid\" name=\"sfid\" value=''/>";
			newTds[i].class="table-contentTD";
			newTds[i].setAttribute("class","table-contentTD");
			newTds[i].style="text-align: center;";
		}else if(i==1){
			newTds[i].innerHTML = "<input type=\"text\" id=\"gx\" name=\"gx\" autocomplete=\"off\" value='' maxlength=\"30\" class=\"inputText\"/>";
			newTds[i].setAttribute("class","table-contentTD");
			newTds[i].style="text-align: center;";
		}else if(i==2){
			newTds[i].innerHTML = "<input type=\"text\" id=\"gzdw\" name=\"gzdw\" autocomplete=\"off\" value='' maxlength=\"50\" class=\"inputText\"/>";
			newTds[i].setAttribute("class","table-contentTD");
			newTds[i].style="text-align: center;";
		}else  if(i==3){
			newTds[i].innerHTML = "<input type=\"text\" id=\"lxdh\" name=\"lxdh\" autocomplete=\"off\" value='' maxlength=\"15\" class=\"inputText\"/>";
			newTds[i].setAttribute("class","table-contentTD");
			newTds[i].style="text-align: center;";
		}else if(i==4){
			newTds[i].innerHTML ="<input type=\"text\" id=\"addLineBtn\" autocomplete=\"off\"  class=\"inputButton\" style=\"text-align: center;width: 63px;\" value=\"插入一行\" autocomplete=\"off\" onClick=\"javascript:addRow(this,5);\"/>&nbsp;<input type=\"text\" id=\"removeLineBtn\" autocomplete=\"off\"  class=\"inputButton\"style=\"text-align: center;width: 63px;\" value=\"删除一行\" autocomplete=\"off\" onClick=\"javascript:deleteRow(this);\"/>";
			newTds[i].setAttribute("class","table-contentTD");
			newTds[i].style="text-align: center;";
		}
	}
}
function deleteRow(obj){
		var tab = obj.parentElement.parentElement.parentElement;
		var tr = obj.parentElement.parentElement;
		if(tab.rows.length>2){
			var rowIndex = tr.rowIndex;
	    	tab.deleteRow(rowIndex); 
		}else{
			alert("至少保留一行");
		}
	}

</script>

<table cellpadding="0" cellspacing="0" border="0" class="table-border"
	width="100%">
	<tr>
		<td class="table-titleTD" style='text-align: center;'>姓名</td>
		<td class="table-titleTD" style='text-align: center;'>与本人关系</td>
		<td class="table-titleTD" style='text-align: center;'>工作或学习单位</td>
		<td class="table-titleTD" style='text-align: center;'>联系电话</td>
<!-- 		<td class="table-titleTD" style='text-align: center;'>操作</td> -->
	</tr>
	<c:choose>
		<c:when test="${not empty familyList}">
			<c:forEach items="${familyList}" var="family">
				<tr>
					<%-- 		   <td class="table-contentTD" style='text-align: center;'><input type="text" id="xm" name="xm" value="${family.xm}" maxlength="50" class="inputText"/><input type="hidden" id="sfid" name="sfid" value="${family.sfid}"/></td> --%>
					<%-- 		   <td class="table-contentTD" style='text-align: center;'><input type="text" id="gx" name="gx" value="${family.gx}" maxlength="30" class="inputText"/></td> --%>
					<%-- 		   <td class="table-contentTD" style='text-align: center;'><input type="text" id="gzdw" name="gzdw" value="${family.gzdw}" maxlength="50" class="inputText"/></td> --%>
					<%-- 		   <td class="table-contentTD" style='text-align: center;'><input type="text" id="lxdh" name="lxdh" value="${family.lxdh}" maxlength="15" class="inputText"/></td> --%>
					<!-- 		   <td class="table-contentTD" style='text-align: center;'><input type="button" id="addLineBtn" autocomplete="off"  class="inputButton" style="text-align: center;" value="插入一行" autocomplete="off" onClick="javascript:addRow(this,5);"/> -->
					<!-- 			  <input type="button" id="removeLineBtn" autocomplete="off"  class="inputButton" -->
					<!-- 					style="text-align: center;" value="删除一行" autocomplete="off" onClick="javascript:deleteRow(this);"/>		 -->
					<!-- 			</td> -->
					<td class="table-contentTD" style='text-align: center;'>${family.xm}</td>
					<td class="table-contentTD" style='text-align: center;'>${family.gx}</td>
					<td class="table-contentTD" style='text-align: center;'>${family.gzdw}</td>
					<td class="table-contentTD" style='text-align: center;'>${family.lxdh}</td>
				</tr>
			</c:forEach>
		</c:when>
		<c:otherwise>
<!-- 			<tr> -->
<!-- 				<td class="table-contentTD" style='text-align: center;'><input -->
<!-- 					type="text" id="xm" name="xm" autocomplete="off" value="" -->
<!-- 					class="inputText" maxlength="50" /><input type="hidden" id="sfid" -->
<!-- 					name="sfid" value="" /></td> -->
<!-- 				<td class="table-contentTD" style='text-align: center;'><input -->
<!-- 					type="text" id="gx" name="gx" autocomplete="off" value="" -->
<!-- 					class="inputText" maxlength="30" /></td> -->
<!-- 				<td class="table-contentTD" style='text-align: center;'><input -->
<!-- 					type="text" id="gzdw" name="gzdw" autocomplete="off" value="" -->
<!-- 					class="inputText" maxlength="50" /></td> -->
<!-- 				<td class="table-contentTD" style='text-align: center;'><input -->
<!-- 					type="text" id="lxdh" name="lxdh" autocomplete="off" value="" -->
<!-- 					class="inputText" maxlength="15" /></td> -->
<!-- 				<td class="table-contentTD" style='text-align: center;'><input -->
<!-- 					type="button" id="addLineBtn" autocomplete="off" -->
<!-- 					class="inputButton" style="text-align: center;" value="插入一行" -->
<!-- 					autocomplete="off" onClick="javascript:addRow(this,5);" /> <input -->
<!-- 					type="button" id="removeLineBtn" autocomplete="off" -->
<!-- 					class="inputButton" style="text-align: center;" value="删除一行" -->
<!-- 					autocomplete="off" onClick="javascript:deleteRow(this);" /></td> -->
<!-- 			</tr> -->
		</c:otherwise>
	</c:choose>
</table>